<%@page import="org.springframework.validation.BindingResult"%>
<%@page import="org.springframework.validation.ObjectError"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>欢迎注册</title>
		<%@include file="/WEB-INF/jsp/common/top_resources.jsp"%>
				<meta name="msapplication-TileImage" content="/cms/resources/t1/assets/img/metis-tile.png" />

		<!-- Bootstrap -->

		<!-- Font Awesome -->
		<link rel="stylesheet" href="/cms/resources/t1/assets/lib/font-awesome/css/font-awesome.css">

		<!-- Metis core stylesheet -->
		<link rel="stylesheet" href="/cms/resources/t1/assets/css/main.css">

		<!-- metisMenu stylesheet -->
		<link rel="stylesheet" href="/cms/resources/t1/assets/lib/metismenu/metisMenu.css">

		<!-- onoffcanvas stylesheet -->
		<link rel="stylesheet" href="/cms/resources/t1/assets/lib/onoffcanvas/onoffcanvas.css">

		<!-- animate.css stylesheet -->
		<link rel="stylesheet" href="/cms/resources/t1/assets/lib/animate.css/animate.css">

		<link rel="stylesheet" href="/cms/resources/t1//assets/lib/inputlimiter/jquery.inputlimiter.css">
		<link rel="stylesheet" href="/cms/resources/t1//assets/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Uniform.js/2.1.2/themes/default/css/uniform.default.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.3/jquery.tagsinput.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.min.css">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.0.1/css/bootstrap-colorpicker.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

		<!--For Development Only. Not required -->
		<script>
			less = {
				env: "development",
				relativeUrls: false,
				rootpath: "/assets/"
			};
		</script>
		<link rel="stylesheet" href="/cms/resources/t1/assets/css/style-switcher.css">
		<link rel="stylesheet/less" type="text/css" href="/cms/resources/t1/assets/less/theme.less">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
		<!--文件上传插件-->
		<link rel="stylesheet" href="${_root}/resources/css/fileinput.min.css" />
		<!--  表单验证css样式-->
		<link rel="stylesheet" href="${_root}/resources/css/formValidation.min.css" />
	</head>

	<body class="theme-blue">
		<%@include file="/WEB-INF/jsp/common/top.jsp"%>
		<div class="main">
			<div class="row">
				<div class="col-lg-6 col-lg-offset-3">
					<div class="box dark">
						<header>
							<div class="icons"><i class="fa fa-edit"></i></div>
							<h5>注册</h5>
							<!-- .toolbar -->
							<div class="toolbar">
								<nav style="padding: 8px;">
									<a href="javascript:;" class="btn btn-default btn-xs collapse-box">
										<i class="fa fa-minus"></i>
									</a>
									<a href="javascript:;" class="btn btn-default btn-xs full-box">
										<i class="fa fa-expand"></i>
									</a>
									<a href="javascript:;" class="btn btn-danger btn-xs close-box">
										<i class="fa fa-times"></i>
									</a>
								</nav>
							</div>
							<!-- /.toolbar -->
						</header>
						<h3>
							<c:forEach items="${error}" var="item">
								<c:if test="${show}=='show'">
									${item.getDefaultMessage()}<br>
								</c:if>
							</c:forEach>
						</h3>
						<div id="div-1" class="body">
							<form  action="${_root}/user/register" id="validateForm" class="form-horizontal" enctype="multipart/form-data" method="post">
								<div class="form-group">
									<label for="name" class="control-label col-lg-3">用户名:</label>
									<div class="col-lg-8">
										<input type="text" id="name" name="name" placeholder="请输入用户名" class="form-control">
									</div>
								</div>
								<!-- /.form-group -->

								<div class="form-group">
									<label for="pass" class="control-label col-lg-3">密码:</label>

									<div class="col-lg-8">
										<input class="form-control" type="password" placeholder="请输入密码" name="pwd" />

									</div>
								</div>
								<!-- /.form-group -->

								<div class="form-group">
									<label class="control-label col-lg-3">再次确认:</label>

									<div class="col-lg-8">
										<input type="password" name="rpwd" placeholder="请重复输入密码" class="form-control">
									</div>
								</div>
								<!-- /.form-group -->

								<div class="form-group">
									<label class="control-label col-lg-3">邮箱:</label>

									<div class="col-lg-8">
										<input type="text" name="email" placeholder="请输入邮箱" class="form-control">
									</div>
								</div>
								<!-- /.form-group -->

								<!-- <div class="form-group">
									<label for="text2" class="control-label col-lg-3">昵称:</label>

									<div class="col-lg-8">
										<input type="text" name="nickName" placeholder="请输入昵称" class="form-control">
									</div>
								</div> 
								<div class="form-group">
									<label for="sex" class="control-label col-lg-3">性别:</label>
									<div class="col-lg-8">
										<label class="radio-inline">
                    						<input type="radio" name="sex" value="1" checked="true" />男
                    					</label>
										<label class="radio-inline">
	                    					<input type="radio" name="sex" value="0" />女
	                    				</label>
									</div>
								</div> 			
								<div class="form-group">
									<label class="control-label col-lg-3">头像:</label>
									<div class="col-lg-8">
										<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
									</div>
								</div> -->
<!-- 								<div class="form-group">
									<div class="col-lg-offset-3 col-lg-3">
										<div class="checkbox">
											<label>
			          							<input type="checkbox" name="savePwd" value="1"> Remember me
			        						</label>
										</div>
									</div>
								</div> -->
								<div class="form-group">
									<div class="col-lg-4 col-lg-offset-5">
										<button type="submit" class="btn btn-default">注册</button>
									</div>
								</div>

								<!-- /.form-group -->
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
			<!-- 底部资源 -->
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
        <script>
        	//为表单注册验证器
        	$(document).ready(function(){
        		$("#validateForm").formValidation({
        			message:'不是有效的值',
        			icon:{
        				valid: 'glyphicon glyphicon-ok',
			            invalid: 'glyphicon glyphicon-remove',
			            validating: 'glyphicon glyphicon-refresh'
        			},
        			//要验证的域
        			fields:{
	        				name:{
	        					message:'名字不能够为空',
	        					validators:{
	        						notEmpty:{
	        							message:'用户名必须设置'
	        						},
	        						stringLength:{
	        							min:6,
	        							max:30,
	        							message:'用户名必须在6-30个字符之间'
	        						},
	        						'regexp': {
				                        'regexp': /^[a-zA-Z0-9_\.]+$/,
				                        message: '用户名只能包含数字、字母、下划线和点号'
				                   },
				                   remote:{
									type: 'POST',
				                   	 url:'/cms/user/exist',
				                   	 message:'用户名已存在,请重新输入'
				                   }
	        						
	        					}
	        				},
	        				pwd: {
			                validators: {
			                    notEmpty: {
			                        message: '密码不能够为空'
			                    },
			                    stringLength:{
	        							min:6,
	        							max:30,
	        							message:'密码长度必须在6-30个字符之间'
	        					}
			                }
			            },
		            	rpwd: {
			                validators: {
			                    notEmpty: {
			                        message: '重复密码不能为空'
			                    },
			                    identical: {
			                        field: 'pwd',
			                        message: '两次密码输入不一致'
			                    }
			                }
		            	},
		            	email:{
		            		validators:{
			            			notEmpty: {
			                        message: '电子邮件不能为空'
			                    },
			                    emailAddress: {
			                        message: '请输入有效的电子邮件地址'
			                    },
			                    remote:{
			                    	type: 'POST',
				                   	url:'/cms/user/exist',
				                   	message:'邮箱已存在,请重新输入'
			                    }
		            		}
		            	},
		            	nickName:{
		            		validators:{
		            			notEmpty:{
		            				message:'昵称不能为空'
		            			}
		            		}
		            	},
        				
        			}
        		});
        	});			        	
        </script>
	</body>
</html>